<template>
    <div>
        <UserLayout>
            <div class="recommend-body" v-if="type=='list'">

                <div class="recommend-top">
                    <a-button class="recommend-btn" type="primary" @click="type='add'">
                        <PlusSquareOutlined/>
                        推荐
                    </a-button>
                    <div class="recommend-order">
                        <a-radio-group size="small" button-style="solid" v-model:value="order.value" @change="orderChange">
                            <a-radio-button v-for="(item, index) in order.list" :value="item.value">{{item.label}}</a-radio-button>
                        </a-radio-group>
                    </div>
                </div>

                <div v-if="list.length">
                    <div class="recommend-item shadow" v-for="(item,index) in list" :key="index">
                        <img :src="item.icon" alt="">
                        <div class="item-info text-elip">
                            <div class="item-title text-elip">{{item.title}}</div>
                            <div class="item-desc text-elip">{{item.desc || '-'}}</div>
                        </div>
                        <div class="item-menu" v-if="item.menu">{{item.menu.title}}</div>
                        <div class="item-like text-elip">
                            <HeartOutlined/>
                            {{item.like||0}}
                        </div>
                        <a-button class="item-edit" size="small" @click="showEditPanel(item)">
                            <template #icon>
                                <EditOutlined/>
                            </template>
                        </a-button>
                        <a-popconfirm title="确认操作?" ok-text="是" cancel-text="否" @confirm="delShareEngine(item.id)">
                            <a-button class="item-del" type="danger" size="small">
                                <template #icon>
                                    <DeleteOutlined/>
                                </template>
                            </a-button>
                        </a-popconfirm>
                    </div>
                    <div class="text-center"
                         v-if="count > list.length">
                        <a-button
                                type="primary"
                                :loading="loading"
                                @click="getShareEngine(page+1)"
                        >加载更多
                        </a-button>
                    </div>
                </div>
                <div class="no-data" v-else>暂无推荐</div>

            </div>
            <div class="recommend-body" v-if="type=='add'">
                <div class="recommend-top">
                    <a-button @click="type='list'">
                        <ArrowLeftOutlined/>
                        返回
                    </a-button>
                </div>
                <div class="add-panel">
                    <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
                        <a-form-item label="选择引擎">
                            <a-select
                                    v-model:value="engine.value"
                                    :showSearch="true"
                                    allowClear
                                    :disabled="engine.state"
                                    @change="selectChange"
                                    placeholder="请选择"
                            >
                                <a-select-option v-for="(item,index) in engine.list" :value="item.value" :key="index">
                                    {{item.label}}
                                </a-select-option>
                                <template #suffixIcon v-if="engine.state">
                                    <LoadingOutlined/>
                                </template>
                            </a-select>
                        </a-form-item>
                        <a-form-item label="推荐分类">
                            <a-select
                                    v-model:value="select.value"
                                    :showSearch="true"
                                    allowClear
                                    placeholder="请选择"
                            >
                                <a-select-option v-for="(item,index) in select.list" :value="item.value" :key="index">
                                    {{item.label}}
                                </a-select-option>
                            </a-select>
                        </a-form-item>
                        <a-form-item label="推荐理由">
                            <!--<a-input v-model:value="form.desc" placeholder="请输入推荐理由"/>-->
                            <a-textarea v-model:value="form.desc" :rows="4" placeholder="请输入推荐理由"/>
                        </a-form-item>
                        <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
                            <a-button type="primary" @click="onSubmit">提交</a-button>
                            <!--<a-button style="margin-left: 10px">取消</a-button>-->
                        </a-form-item>
                    </a-form>
                </div>
            </div>
        </UserLayout>

        <!--编辑-->
        <a-modal title="编辑" v-model:visible="edit.state" @ok="editShareEngineOk" @cancel="editCancel">
            <a-form layout="vertical">
                <a-form-item>
                    <div class="link-body">
                        <img :src="edit.img" alt="">
                        <span class="text-elip">{{edit.title}}</span>
                        <a-button
                                type="primary"
                                shape="circle"
                                :disabled="engine.state"
                                @click="updateTDK"
                        >
                            <template #icon>
                                <LoadingOutlined v-if="engine.state"/>
                                <RedoOutlined v-else/>
                            </template>
                        </a-button>
                    </div>
                </a-form-item>
                <a-form-item label="推荐分类">
                    <a-select
                            v-model:value="select.value"
                            :showSearch="true"
                            allowClear
                            placeholder="请选择"
                    >
                        <a-select-option v-for="(item,index) in select.list" :value="item.value" :key="index">
                            {{item.label}}
                        </a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item label="推荐理由">
                    <a-textarea v-model:value="form.desc" :rows="4" placeholder="请输入推荐理由"/>
                </a-form-item>
            </a-form>
        </a-modal>
    </div>
</template>

<script>
    import UserLayout from '/src/components/user/Layout.vue';

    import {engine, shareEngine, getShareEngine, editShareEngine, delShareEngine} from '/src/request/api/nav';
    import {engineMenu} from '/src/request/api/store';
    import website from "/src/config/website";
    import {getTDK} from "/src/request/api/website";

    // iconfont
    import {
        ArrowDownOutlined,
        ArrowLeftOutlined,
        PlusSquareOutlined,
        DeleteOutlined,
        EditOutlined,
        HeartOutlined,
        LoadingOutlined,
        RedoOutlined,
    } from '@ant-design/icons-vue';

    export default {
        name: "recEngine",
        // 组件
        components: {
            UserLayout,
            ArrowDownOutlined,
            ArrowLeftOutlined,
            PlusSquareOutlined,
            DeleteOutlined,
            EditOutlined,
            HeartOutlined,
            LoadingOutlined,
            RedoOutlined,
        },
        // 数据
        data() {
            return {
                type: 'list',

                labelCol: {span: 4},
                wrapperCol: {span: 14},

                // 引擎
                engine: {
                    state: false,
                    list: [],
                    value: null,
                },

                // 引擎分类栏目
                select: {
                    list: [],
                    value: null,
                },

                // 我的分享引擎列表
                list: [],
                count: 0,
                page: 1,
                limit: 15,
                loading: false,
                order: {
                    list: [
                        {label: '时间倒序', value: 'create_time desc'},
                        {label: '时间正序', value: 'create_time asc'},
                        {label: '喜欢倒序', value: 'like desc'},
                        {label: '喜欢正序', value: 'like asc'},
                    ],
                    value: 'create_time desc',
                },

                // 编辑面板
                edit: {
                    state: false,
                    id: '',
                    img: '',
                    title: '',
                    url: '',
                },

                // 提交FORM
                form: {
                    desc: '',
                }
            }
        },
        // DOM未渲染前调用
        created() {
            this.init();
        },
        // DOM渲染后调用
        mounted() {
        },
        // 方法
        methods: {
            // 初始化
            init() {
                this.getEngine();
                this.getEngineMenu();
                this.getShareEngine();
            },
            // 获取我推荐的引擎
            getShareEngine(p, l) {
                let that = this,
                    page = p || 1,
                    limit = l || that.limit,
                    order = that.order.value;
                that.loading = true;

                getShareEngine({
                    page: page,
                    limit: limit,
                    order: order,
                }).then(res => {
                    that.loading = false;
                    let list = res.list,
                        count = parseInt(res.count || 0),
                        array = (page == 1) ? list : that.list.concat(list);

                    that.count = count;
                    that.page = page;
                    that.list = array;
                }).catch(err => {
                    console.log(err);
                    this.loading = false;
                    that.$message.error(err.msg);
                })
            },
            // 移除我的推荐引擎
            delShareEngine(id) {
                let that = this;
                delShareEngine({
                    ueid: id,
                }).then(res => {
                    that.getShareEngine();
                    that.$message.success(res.msg || website.msg.success);
                }).catch(err => {
                    that.$message.error(err.msg || website.msg.error);
                })
            },
            // 获取我的引擎
            getEngine() {
                let that = this;
                engine().then(res => {
                    // console.log(res);
                    let list = res.list,
                        array = [];
                    list.forEach(val => {
                        array.push({
                            value: val.id,
                            label: val.title,
                            url: val.url,
                        });
                    })
                    that.engine.list = array;
                }).catch(err => {
                    console.log(err);
                })
            },
            // 获取商店书签分类
            getEngineMenu() {
                let that = this;
                engineMenu().then(res => {
                    // console.log(res);
                    let list = res.list,
                        array = [];
                    list.forEach(val => {
                        array.push({
                            value: val.id,
                            label: val.title,
                        })
                    })
                    that.select.list = array;
                }).catch(err => {
                    console.log(err);
                })
            },
            // 提交
            onSubmit() {
                let that = this,
                    ueid = that.engine.value,
                    desc = that.form.desc,
                    etid = that.select.value;

                // console.log('onSubmit', ueid, etid);
                if (!desc) {
                    that.$message.warning('推荐理由不能为空');
                    return false;
                }
                if (!etid) {
                    that.$message.warning('分类不能为空');
                    return false;
                }
                shareEngine({
                    ueid: ueid,
                    desc: desc,
                    etid: etid,
                }).then(res => {
                    that.engine.value = null;
                    that.select.value = null;
                    that.form.desc = '';
                    that.getShareEngine();
                    that.$message.success(res.msg || website.msg.success);
                }).catch(err => {
                    console.log(err);
                    that.$message.error(err.msg || website.msg.error);
                })
            },
            // 打开编辑面板
            showEditPanel(item) {
                // console.log(item);
                let that = this;
                that.edit.state = true;
                that.edit.id = item.id;
                that.edit.img = item.icon;
                that.edit.title = item.title;
                that.edit.url = item.url;
                that.form.desc = item.desc || '';
                that.select.value = item.etid || null;
            },
            // 编辑提交
            editShareEngineOk() {
                let that = this,
                    id = that.edit.id,
                    desc = that.form.desc,
                    etid = that.select.value;

                if (!desc) {
                    that.$message.warning('推荐理由不能为空');
                    return false;
                }
                if (!etid) {
                    that.$message.warning('分类不能为空');
                    return false;
                }
                editShareEngine({
                    id: id,
                    desc: desc,
                    etid: etid,
                }).then(res => {
                    that.select.value = null;
                    that.form.desc = '';
                    that.edit.id = '';
                    that.edit.img = '';
                    that.edit.title = '';
                    that.edit.state = false;
                    that.getShareEngine();
                    that.$message.success(res.msg || website.msg.success);
                }).catch(err => {
                    console.log(err);
                    that.$message.error(err.msg || website.msg.error);
                })
            },
            // 编辑取消
            editCancel() {
                let that = this;
                that.edit.id = '';
                that.edit.img = '';
                that.edit.title = '';
                that.edit.url = '';
                that.form.desc = '';
                that.select.value = null;
            },
            // 引擎选择监听
            selectChange(value, option) {
                let that = this,
                    engine = that.engine.list[option.key];
                that.engine.state = true;
                getTDK({
                    url: engine.url,
                    domain: true,
                }).then(res => {
                    that.engine.state = false;
                    let data = res.data;
                    if (data.desc) {
                        that.form.desc = data.desc;
                    } else {
                        that.$message.warning("解析失败");
                    }
                }).catch(err => {
                    that.engine.state = false;
                    that.$message.error(err.msg);
                })
            },
            // 更新TDK信息 (编辑推荐)
            updateTDK() {
                let that = this,
                    url = that.edit.url || '';
                that.engine.state = true;

                getTDK({
                    url: url,
                    domain: true,
                }).then(res => {
                    that.engine.state = false;
                    let data = res.data;
                    if (data.desc) {
                        that.form.desc = data.desc;
                    } else {
                        that.$message.warning("解析失败");
                    }
                }).catch(err => {
                    that.engine.state = false;
                    that.$message.error(err.msg);
                })
            },
            // 排序筛选
            orderChange() {
                this.getShareEngine();
            },
        }
    }
</script>

<style lang="less" scoped>
    @radius: 8px;

    .recommend-body {
        min-height: 300px;

        .recommend-top {
            margin-bottom: 10px;
            display: flex;
            align-items: center;

            .recommend-btn {
                width: 100px;
            }

            .recommend-order {
                flex: 1;
                text-align: right;
            }
        }

        .recommend-item {
            display: flex;
            align-items: center;
            padding: 10px;
            background-color: white;
            margin-bottom: 10px;
            border-radius: @radius;

            &:last-child {
                margin-bottom: 0;
            }

            img {
                position: relative;
                width: 40px;
                height: 40px;
                margin-right: 10px;

                &:after {
                    content: '';
                    display: block;
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    z-index: 2;
                    top: 0;
                    left: 0;
                    background: url('/src/assets/imgs/network.png') white;
                    background-size: 100%;
                }
            }

            .item-info {
                flex: 1;

                .item-title {
                    font-size: 16px;
                    color: black;
                    height: 24px;
                    line-height: 24px;
                }

                .item-desc {
                    font-size: 12px;
                    height: 16px;
                    line-height: 16px;
                    color: #848484;
                }
            }

            .item-like {
                height: 24px;
                line-height: 24px;
                max-width: 70px;
                margin-left: 10px;
            }

            .item-edit {
                margin-left: 10px;
            }

            .item-del {
                margin-left: 10px;
            }
        }

        .add-panel {
            padding: 30px;
            min-height: 300px;
            background-color: white;
        }
    }

    .link-body {
        padding: 10px;
        border-radius: 4px;
        background-color: #f1f1f1;
        display: flex;

        img {
            position: relative;
            width: 32px;
            height: 32px;
            float: left;
            margin-right: 10px;

            &:after {
                content: '';
                display: block;
                width: 100%;
                height: 100%;
                position: absolute;
                z-index: 2;
                top: 0;
                left: 0;
                background: url('/src/assets/imgs/network.png') white;
                background-size: 100%;
            }
        }

        span {
            flex: 1;
            height: 32px;
            line-height: 32px;
        }

        button {
            margin-left: 10px;
        }
    }
</style>